/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.heroBanner {
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
  // min-height: calc(100vh - var(--ifm-navbar-height) * 2);
  min-height: calc(714px - var(--ifm-navbar-height));
  background: url('/img/pattern.png') no-repeat right bottom, linear-gradient(141.15deg, rgba(0, 0, 0, 0.5) 1.1%, #008DD2 99.38%), #252D5A;
  background-size: cover;

  &::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: ' ';
    background-color: var(--link-color-10);
  }

  :global .container {
    z-index: 1;

    .button {
      font-size: 1.6rem;
      color: var(--link-color);
      background-color: var(--bg-color);
      border-color: transparent;

      @media screen and (max-width: 966px) {
        font-size: 1.2rem;
      }
    }
  }

  h1 {
    font-size: 5rem;

    @media screen and (max-width: 966px) {
      font-size: 2.5rem;
    }
  }
}

.rightAlignDetails {
  margin-top: 2rem;

  p {
    max-width: 555px;
    font-size: 18px;
    line-height: 26px;
    margin-left: auto;
  }
}

:global {

  .hero__subtitle {
    max-width: 555px;
  }
}
